<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>index</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/bootstrap/css/bootstrap-theme.min.css}" rel="stylesheet" />
</head>
<body>
<div class="panel panel-primary">
    <div class="panel-heading">hello</div>
    <div class="panel-body" th:text="${xname}"></div>
</div>
<div class="panel panel-warning">
    <div class="panel-heading">hello</div>
    <div id="usernamediv" class="panel-body"></div>
</div>
<script type="text/javascript" th:src="@{/jquery.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script th:inline="javascript">
    $(function(){
        $.ajax({
            url:"/thymeleaf/ajax",
            data:{
                username:"yuxi"
            },
            type:"get",
            dataType:"text",
            success:function(text){
                alert(text);
                $("#usernamediv").text(text);
            }
        });
    });
</script>
</body>
</html>